<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('任务ECharts')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>任务完成情况柱状图</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {
        var myChart = echarts.init(document.getElementById('echarts-bar-chart'));
        $.get('/stats/task/getTaskCompletion').done(function (data){
            var option = {
                title: {
                    text: data.title
                },
                tooltip: {},
                legend: {
                    data: data.legend
                },
                xAxis: {
                    data:data.xName
                },
                yAxis: {},
                series: [{
                    name: data.legend[2],
                    type: 'bar',
                    data: data.nums[2]
                },
                    {
                        name: data.legend[1],
                        type: 'bar',
                        data: data.nums[1]
                    },
                    {
                        name: data.legend[0],
                        type: 'bar',
                        data: data.nums[0]
                    },
                ]
            };
            myChart.setOption(option);
            window.onresize = myChart.resize;
        });
    });
</script>
</body>
</html>